<!-- =====【关联图页面】====== -->
<template>
  <div class="pie-relational-graph">
    <div class="echarts-style-main1" id="mainGraph2"></div>
  </div>
</template>
<script>
export default {
  props: {
    systemId: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      optionGraph2: {
        // 关联图
        // color:["#0b3270"],
        tooltip: {
          show: true, //默认显示
          showContent: true, //是否显示提示框浮层
          trigger: "item", //触发类型，默认数据项触发
          triggerOn: "click", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
          alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
          showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
          enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          position: "top", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
          confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
          transitionDuration: 0.4 //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
          // formatter: "{a} <br/>{b}: {c} ({value}%)<br/>",
        },
        series: [
          {
            type: "graph", //关系图
            name: "资源信息", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            layout: "force", //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
            legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
            // hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
            coordinateSystem: null, //坐标系可选
            xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex: 0, //y轴坐标
            force: {
              //力引导图基本配置
              //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
              repulsion: [10, 35], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity: 0.003, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: 220, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
              layoutAnimation: true //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
            },
            roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            nodeScaleRatio: 0.4, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            draggable: true, //节点拖拽，只在力引导布局用。
            focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            edgeSymbol: ["circle", "arrow"], //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
            edgeSymbolSize: [5, 15], //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            // itemStyle: {//配置节点的颜色已及尺寸
            //     normal: {
            //         // （1） 直接写一个颜色，这样的结果是所有节点都是同一个颜色
            //         //color: '#fff',
            //         // （2） 像在全局定义中一样，使用数组声明多个颜色
            //         //        但是这样的结果是所有颜色都变成黑色（大概是不允许这样用吧）
            //         //color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
            //         // （3） 类似柱状图定义多个颜色，利用函数返回不同的颜色值
            //         //        结果同上，全变成黑色了
            //         color: function (params) {
            //             var colorList = ['red', 'orange', 'green', 'blue', 'purple'];
            //             return colorList[params.dataIndex]
            //         },
            //     }
            // },
            lineStyle: {
              //==========关系边的公用线条样式。
              normal: {
                color: "rgba(255,0,255,0.4)",
                width: "3",
                type: "dotted", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                curveness: 0, //线条的曲线程度，从0到1
                opacity: 0.7 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                //高亮状态
              }
            },
            label: {
              //=============图形上的文本标签
              normal: {
                show: true, //是否显示标签。
                position: "inside", //标签的位置。['50%', '50%'] [x,y]
                textStyle: {
                  //标签的字体样式
                  color: "#cde6c7", //字体颜色
                  fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                  fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                  fontFamily: "sans-serif", //文字的字体系列
                  fontSize: 12 //字体大小
                }
              },
              emphasis: {
                //高亮状态
              }
            },
            edgeLabel: {
              //==============线条的边缘标签
              normal: {
                show: false
              },
              emphasis: {
                //高亮状态
              }
            },
            data: [
              {
                name: "database",
                statusName: "",
                id: "35"
              },
              {
                name: "mysql",
                statusName: "Error",
                id: "25"
              }
            ],
            categories: [
              //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
              {
                name: "磁盘关联",
                symbol: "roundRect",
                itemStyle: {
                  color: "rgba(73, 156, 214, 1)"
                },
                label: {
                  //标签样式
                }
              },
              {
                name: "系统关联",
                symbol: "roundRect"
              },
              {
                name: "服务关联",
                symbol: "roundRect"
              },
              {
                name: "数据库",
                symbol: "roundRect"
              },
              {
                name: "资源关联",
                symbol: "roundRect"
              }
            ],
            links: [
              {
                source: "25",
                target: "35"
              }
            ]
          }
        ]
      },
      replicaList: [],
      echartsPopupBox: false,
      seriesDataPart: [],
      seriesDataNodes: [],
      getMessagePrompt: "", //得到提示信息
      htmlStr: ""
    };
  },
  // watch: {
  //     hookToolTip: function (name) {
  //       this.$nextTick(() => {
  //         const html_ = document.querySelector(`#btn-tooltip`)
  //           html_ && html_.addEventListener(`click`, () => {
  //             // 点击事件弹框显示
  //             this.dialogVisible = true
  //           })
  //       })
  //     }
  //   },
  created () { },
  mounted () {
    this.echatsLoading();
  },
  methods: {
    // =====【接口列表】=====
    // 获取关联图json数据==接口
    echatsLoading () {
      let _self = this;
      let params = {
        businessId: this.systemId //this.systemId
      };
      // 调了两次接口==第一次为获取图表json关联数据，第二次为每一项的副本信息
      _self.http.get(this.$api.monitorApi.relation, params).then(res => {
        if (res.data.code == 0) {
          //每一项增加一个属性
          this.seriesDataPart = res.data.data.links; //连接线
          res.data.data.nodes.map(item => {
            if (!item.serviceStatus) {
              this.seriesDataNodes.push(
                Object.assign({}, item, { itemStyle: { color: "#888888" } })
              );
            } else {
              this.seriesDataNodes.push(
                Object.assign({}, item, { itemStyle: { color: "#34529e" } })
              );
            }
          });
          this.echatsTreeLoading();
        }
      });
    },
    // =====副本信息==接口=====
    // 关联图显示==图表
    echatsTreeLoading () {
      let _self = this;
      let myChartGraph2 = this.$echarts.init(
        document.getElementById("mainGraph2")
      );
      this.optionGraph2.series[0].data = this.seriesDataNodes;
      this.optionGraph2.series[0].links = this.seriesDataPart;
      this.optionGraph2.series[0].symbolSize = 100;
      // this.optionGraph2.series[0].itemStyle.normal.color = params => {
      //     params.data.serviceStatus,
      //     "params.data.serviceStatusparams.data.serviceStatus"
      //   );
      //   if (!params.data.serviceStatus) {
      //     return "#fc853e";
      //   } else {
      //     return "#888888";
      //   }
      // };

      if (this.seriesDataNodes.serviceStatus) {
        this.optionGraph2.series[0].links = this.seriesDataPart;
      } else {
        myChartGraph2.on("click", param => {
          let paramsData = {
            id: param.data.id,
            serviceType: param.data.name
          };
          _self.http.get("/monitor/service/getReplicaList", paramsData).then(resData => {
            if (resData.data.code == 0) {
              this.replicaList = resData.data.data;
              let statusList = "";
              let replica = this.replicaList.replicaList[0];
              this.htmlStr = "";
              this.htmlStr += `<div style='font-size: 18px; font-weight: 700;'>
                                  ${param.seriesName} <br/>
                               </div>
                               <div style='margin:10px 0 5px 10px;'>
                                  节点名称 ：${replica.node}<br/>
                                  deployment ：${replica.deployment}<br/>
                                  服务类型 ：${replica.serviceType}<br/>
                                  命名空间 ：${replica.namespace}<br/>
                               </div>
                               <div style='border: 2px solid #888888; padding: 5px 10px 0 10px;'>`;
                               this.replicaList.replicaList.map( item => {
                                 statusList = item.status === "Running" ?  "正常" : "异常";
                                 this.htmlStr += `<div style='margin-bottom:10px'>
                                                   副本名称 ：${item.podName}<br/>
                                                   副本状态 ：${statusList}<br/>
                                                  </div>`;
                               })
                              this.htmlStr += "</div>";
              this.optionGraph2.tooltip.formatter = this.htmlStr;
              myChartGraph2.setOption(this.optionGraph2);
            } else {
              this.optionGraph2.tooltip.formatter = "暂无副本信息";
              myChartGraph2.setOption(this.optionGraph2);
              this.$Message.error(resData.data.message);
            }
          });
        });
        myChartGraph2.setOption(this.optionGraph2);

        // 拖动后固定位置
        // myChartGraph2.on('click',function(paramsMove){
        //     var option = myChartGraph2.getOption();
        //     option.series[0].data[paramsMove.dataIndex].x=paramsMove.event.offsetX;
        //     option.series[0].data[paramsMove.dataIndex].y=paramsMove.event.offsetY;
        //     option.series[0].data[paramsMove.dataIndex].fixed=true;
        // });
        // this.seriesData.map ( item => {  // 判断服务状态改变颜色==改变关联图的颜色
        //     if(item.replicaData === null){
        //         item.itemStyle.color = ["#858585"]
        //     } else if (item.replicaData.totalStatus === "Running"){
        //         item.itemStyle.color = ["#0b3270"]
        //     } else if(item.replicaData.totalStatus === "Warning"){
        //         item.itemStyle.color = ["#dcdcaa"]
        //     } else if(item.replicaData.totalStatus === "Error"){
        //         item.itemStyle.color = ["#e51400"]
        //     }
        // })
      }
    }
  }
};
</script>
<style lang="less" scoped>
.echarts-style-main1 {
  width: 100%;
  /* height: calc(100vh - 190px); */
  height: 500px;
}
.echarts-popup-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1001;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  /* .echarts-popup-box-content{ */
  .echarts-style-main3 {
    display: flex;
    width: 1000px;
    height: 500px;
    background-color: rgba(7, 25, 80, 0.616);
  }
  .echarts-style-main3-btn {
    display: flex;
    justify-content: flex-end;
    .echarts-style-main3-btn-cancel {
      width: 80px;
      height: 40px;
      background-color: rgb(148, 148, 148);
      margin: 5px 5px;
    }
    .echarts-style-main3-btn-confirm {
      width: 80px;
      height: 40px;
      background-color: rgb(116, 116, 116);
      margin: 5px 5px;
    }
  }
  /* } */
}
.pie-relational-graph {
  width: 100%;
  height: 500px;
}
</style>
